import { useState, useContext, useEffect } from "react";
import { UPDATE_PARAMS } from "../../store/actionType";
import { AppContext } from "../../store";
import { Tag, Popover, Button } from 'antd';
import styles from './Cate.module.scss';
import { FilterOutlined } from '@ant-design/icons';
import Menu from './Menu';

export default function SortBar(props) {
    const { dispatch, appData } = useContext(AppContext);
    const [btnText, setBtnText] = useState('');
    const [show, setShow] = useState(false)
    const data = [{
        value: 0,
        label: 'Featured'
    }, {
        value: 1,
        label: 'New Arrival'
    }, {
        value: 2,
        label: 'Price:High to Low'
    }, {
        value: 3,
        label: 'Price:Low to High'
    }]
    const handleClickItem = (item) => {
        setBtnText(item.label)
        dispatch({
            type: UPDATE_PARAMS,
            data: { sort: item.value }
        })
        if (item.label === 0) {
            props.getData(appData.params)
        } else {
            props.getData({ ...appData.params, ...{ sort: item.value } })
        }

    }
    const content = () => {
        return (
            <div className={styles.dropdown}>
                {
                    data.map(item => (
                        <div className={styles.dropdownitem} onClick={() => handleClickItem(item)} key={item.value}>{item.label}</div>
                    ))
                }

            </div>
        )
    }
    useEffect(() => {

    }, [])
    return (
        <div className={styles.sortbar}>

            <div className={styles.bar}>
                <FilterOutlined
                    className={`${styles.filter} hidden-md hidden-lg`}
                    style={{ fontSize: '20px', color: '#999' }}
                    onClick={() => setShow(true)}
                />
                <Popover placement="bottom" content={content} >
                    <Button>Sort By {btnText}</Button>
                </Popover>
            </div>
            <div className={show ? "mobile-menu show" : "mobile-menu"}>
                <Menu
                    data={props.data}
                    current={props.current}
                    color={props.color}
                    size={props.size}
                    getData={props.getData}
                    cate={props.cate}
                    apiUrl={props.apiUrl} 
                    mobile
                />
            </div>
            {show && <div className="nav-mask" onClick={() => setShow(false)}></div>}
        </div>

    )
}